<template>
    <Card>
        <Form ref="formInline" :model="searchData"  label-colon autocomplete="off" >
            <Row style="height: 40px">
                <Col span="8">
                    <FormItem label="所属机构" prop="comCode" :label-width="80">
                      <code-type-tag v-model="searchData.comCode" is-tree code-type="organization" placeholder="请选择所属机构"/>
                    </FormItem>
                </Col>
                <Col span="8">
                   <FormItem  prop="user" label="员工名称" :label-width="80">
                       <Input v-model="searchData.name" />
                   </FormItem>
                </Col>
                <Col span="8">
                   <FormItem  prop="user" label="员工编号" :label-width="80">
                       <Input v-model="searchData.serialNo" />
                   </FormItem>
                </Col>
            </Row>
            <Row style="height: 40px">
                <Col span="8">
                    <FormItem  prop="user" label="状态" :label-width="80">
                            <Select v-model="searchData.valid" clearable >
                                <Option value=1>启用</Option>
                                <Option value=0>停用</Option>
                            </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                     <FormItem style="margin-left: 2em">
                         <Button type="primary" @click="queryData(true)"><Icon type="ios-search" />查询</Button>
                         <Button style="margin-left: 2em" type="primary" ghost @click="handleReset"><Icon type="md-sync" />重置</Button>
                     </FormItem>
                </Col>
            </Row>
          <permission-button-group @handleEvent="handleEvent" permission-code-prefix="staff_" v-model="tableSize" fullscreen-able/>
            </Form>
            <div>
                <Table border ref="selection" :size="tableSize" :columns="columns" :data="resultData" @on-selection-change="selectItem"></Table>
            </div>
            <div class="ivu-mt ivu-text-center">
                <Page :total="pager.total" :current="pager.current" show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange" :show-sizer="true"/>
            </div>
           <staff-detail :show-modal="showModal" :title="modalTitle" :user-id="userId" :can-edit="canEdit" @callbackByCancel="callbackByCancel" @callbackByOk="callbackByOk"/>
    </Card>
</template>

<script>
import {search,resetPassword,close,open} from "@/api/userApi";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import StaffDetail from '@/views/group_management/staff/components/staff-detail'
import PermissionButtonGroup from "@/components/permissionButton/permission-button-group";
import Translate from '@/components/codeType/translate'
import codeTypeTag from '@/components/codeType/code-type-tag'
export default {
  components: {
    StaffDetail,
    PermissionButtonGroup,
    Translate,
    codeTypeTag
  },
  data () {
    return {
      showModal: false,
      modalTitle: '',
      canEdit: false,
      selectItems: [],
      userId:null,
      tableSize:'default',
      searchData:{
        name: '',
        comCode: '',
        serialNo: '',
        mobile: '',
        email: '',
        valid: '',
      },
      pager:{
        size:10,
        current: 1,
      },
      formInline: {
        user: '',
        password: ''
      },
      organizationTrees: [],
      resultData: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '员工编号',
          key: 'serialNo',
          align: 'center'
        },
        {
          title: '员工名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '所属部门',
          key: 'comCode',
          align: 'center',
          render:  (h, params) => {
            return h(Translate,{
              props:{code:params.row.comCode,codeType:'organization'}} );
          }
        },
        {
          title: '岗位',
          key: 'positionName',
          align: 'center'
        },
        {
          title: '手机号码',
          key: 'mobile',
          width: 140,
          align: 'center'
        },
        {
          title: '状态',
          key: 'valid',
          width: 100,
          align: 'center',
          render: (h, params)=>{
            if(params.row.valid===1){
              return  h('Tag',{props:{color:'blue'}},'正常');
            }
            return  h('Tag',{props:{color:'warning'}},'禁用');}
        },
        {
          title: '操作',
          key: 'id',
          width: 200,
          align: "center",
          render: (h, params)=>{
            let tags = [];
            if (params.row.valid===1){
              tags.push(h('Button',{on:{click: ()=> {this.handleEvent('close',params.row.id);}},
                              props:{type:'error',size:'small',icon:'md-close-circle',shape:'circle'}
              },'禁用'))
            }else{
              tags.push(h('Button',{
                on:{click: ()=> {this.handleEvent('open',params.row.id);}},
                props:{type:'success',size:'small',icon:'md-open',shape:'circle'}
              },'启用'))
            }
            tags.push(h('Button',{
              on:{click: ()=> {this.handleEvent('resetPassword',params.row.id);}},
              props:{type:'dashed',size:'small',icon:'ios-lock',shape:'circle'}
            },'重置密码'))
            return h('span',tags)
          }
        }
      ],
    }
  },
  created(){

  },
  mounted(){
    this.queryData()
  },
  methods: {
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status);
    },
    pageChange(page){
      this.pager.current = page
      this.queryData()
    },
    pageSizeChange(pageSize){
      this.pager.size = pageSize
      this.pager.current = 1
      this.queryData()
    },
    queryData(isSearch){
      if (isSearch){
        this.pager.current = 1
      }
      search({
        pager:this.pager,
        queryData:this.searchData
      }).then( res => {
        this.resultData = res.records
        this.pager.total = res.total
      })
    },
    selectItem(row){
      this.selectItems = row
    },
    handleEvent(event,param){
      if (event==='staff_add'){
        this.modalTitle = '添加员工'
        this.canEdit = true
        this.userId = null
        this.showModal = true
      }else if (event === 'resetPassword'){
        resetPassword({userId:param}).then(()=>{this.$Message.success('重置密码成功！')})
      } else if (event === 'close'){
        close({userId:param}).then(()=>{
          this.$Message.success('禁用成功！')
          this.queryData(true)
        })
      }
      else if (event === 'open'){
        open({userId:param}).then(()=>{this.$Message.success('禁用成功！')
          this.queryData(true)})
      }
      else{
        if (this.selectItems.length===0){
          this.$Message.error('请先选择数据，后操作！')
          return
        }
        if (event ==='staff_view'||event ==='staff_edit'){
          this.canEdit = event !== 'view'
          this.modalTitle = '员工岗位'
          this.userId = this.selectItems[0].id
          this.showModal = true
        }
        if (event ==='staff_delete'){
          let ids = []
          this.selectItems.forEach((item) => {ids.push(item.id)})
          /*deleteData(ids).then(res=>{
            this.$Message.success('删除成功！')
            this.queryData()
          })*/
        }
      }
    },
    callbackByCancel () {
      this.showModal = false
    },
    callbackByOk(){
      this.showModal = false
      this.queryData()
    },
  }
}
</script>

<style scoped>

</style>